<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>按钮标记 Button markup options-JQUERY MOBILE 1.0正式版中文手册</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../images/favicon.ico"/>
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">

	<h1>按钮综述</h1>
    <ul class="tab">
    	<a href="#" class="current">综述</a>
		<a href="#">选项</a>
    	<a href="#">方法</a>
    	<a href="#">事件</a>
    </ul>
   
    <div class="subtab">
<div class="desc">
<h2>按钮是由标准的HTML的a标签和input元素写成，然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用。查阅 data- attribute reference 来了解你可以给按钮添加的属性。

</h2>
</div>
<div class="desc">
<h1>将链接样式化为按钮 Styling links as buttons</h1>
                <div>在page元素的主要block内，可以通过给任意链接加data-role=&quot;button&quot;的属性样式化为按钮。Jquery Mobile会给链接加一些必要的class来把他表现为按钮。</div></div>
 				<p class="indent"><strong>例如：</strong></p>
  <div class="code">
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt; </div>
    	<p class="indent"><strong>就会生成一个基于连接的按钮：</strong></p>
		<img src="../../images/Button markup options_1.png" tppabs="http://www.jqmapi.com/images/Button%20markup%20options_1.png">		

<div class="desc">
    <div>在page元素的主要block内，可以通过给任意链接加data-role=&quot;button&quot;的属性样式化为按钮。Jquery Mobile会给链接加一些必要的class来把他表现为按钮。</div></div>
		<div class="desc">
				<h2>表单按钮 Form buttons</h2>
<div>为了容易的样式化按钮，Jquery Mobile自动把type为submi,reset,button或image的按钮元素或输入元素样式化为按钮，所以没有必要增加data-role=&quot;button&quot;的属性</div>
<div>基于表单(form-based)的按钮的原始按钮(input)是隐藏的，但是依然保留其标记。 当一个按钮的点击事件触发时，也会在原始的表单按钮上触发点击事件。</div>
</div>
  </div>
  
  
  
    <div class="subtab">
<div class="desc">
<h2>下面的选项适用于<strong>所有的按钮</strong></h2>
</div>
	<h1 class="method"><div class="wg">$.mobile.changePage</div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：true</strong></p>
    
<div class="code"> 
    <p>此参数为ture的话则按钮会应用主题的圆角。此选项也可以通过data-corners="false"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</p>
  </div>

	<h1 class="method"><div class="wg">icon</div>
  		<div class="info">字符串</div></h1>
	<p class="indent"><strong>默认：null</strong></p> 
<div class="code"> 
    <p>从图标组给按钮添加图标。此选项也可以通过data-corners="false"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</p>
  </div> 
	<h1 class="method"><div class="wg">iconpos</div>
  		<div class="info">字符串</div></h1>
	<p class="indent"><strong>默认："left"</strong></p>
<div class="code"> 
    <p>定义按钮的图标的位置。可能的值是： left, right, none,notext.使用notext值的话按钮按钮只显示图标，没有文字。此选项也可以通过data-iconpos="left"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</p>
  </div> 
	<h1 class="method">
	  <div class="wg"> iconshadow </div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：true</strong></p>
<div class="code"> 
    <p>此参数为ture的话则按钮会应用主题的圆角。此选项也可以通过data-iconshadow="false"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</p>
  </div> 
	<h1 class="method">
	  <div class="wg">inline</div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：null (false)</strong></p>
<div class="code"> 
    <p>设为true的话，会使按钮为内联的样式，这样按钮的宽度就由按钮内的文字来决定。默认情况下此项为null (false)，所以按钮会的宽度会撑满，不管里面有多少文字。可以使用的值是:true, false。此选项也可以通过data-inline="true"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</p>
  </div> 
	<h1 class="method">
	  <div class="wg">shadow</div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：true</strong></p>
  </div>
<div class="code"> 
    <p>设为true的话，会使按钮有阴影。此选项也可以通过data-shadow="false"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</p>
  </div> 
  
	<h1 class="method">
	  <div class="wg">theme</div>
  		<div class="info">字符串</div></h1>
	<p class="indent"><strong>默认：null,从父容器继承</strong></p>
  
<div class="code"> 
    <p>给按钮的所有实例设定主题样式。接受从a-z的一个单个字母来映射相应的主题样式。默认情况下会继承父容器的主题样式。此选项也可以通过data-theme="a"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</p>
  </div> 
  
<p class="alert">
下面的选项只适用于<strong>表单的按钮</strong>，由框架自动初始化
</p>

	<h1 class="method">
	  <div class="wg">initSelector</div>
  		<div class="info">css选择符</div></h1>
	<p class="indent"><strong>默认: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"</strong></p>
<div class="code"> 
    <p>此选项用来定义被被初始化为表单按钮的选择符（通过元素类型，数据规则等）</p>
    <p>要改变被初始化的元素，需要给mobileinit event事件绑定这个选项</p> 
    <p>$( document ).bind( "mobileinit", function(){</p>
    <p>&nbsp;&nbsp;&nbsp;<strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong></p>
    <p>});</p>
  </div> 



    <div class="subtab">
<div class="desc">
<h2>下面的方法只适用于<strong>表单中的按钮</strong>。基于链接的按钮<strong>没有</strong>相关联的方法。</h2>
</div>
<div class="code"> 
    <p>此参数为ture的话则按钮会应用主题的圆角。此选项也可以通过data-corners="false"的属性设置</p>
    <p>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</p>
  </div>
	<h1 class="method">
	  <div class="wg">enable</div>
  		<div class="info">是一个被disabled的表单按钮可用</div></h1>
<div class="code"> 
    <p>$('[type='submit']').button('enable');</p>
  </div> 


	<h1 class="method">
	  <div class="wg">disable</div>
  		<div class="info">禁用一个表单按钮</div></h1>
<div class="code"> 
    <p>$('[type='submit']').button('disable');</p>
  </div> 
  
  
  	<h1 class="method">
	  <div class="wg">refresh</div>
  		<div class="info">更新一个表单按钮</div></h1>
	<p class="indent">如果你通过js更新了一个表单按钮，你必须再对他通过refresh方法更新他的视觉样式。</p>
<div class="code"> 
    <p>$('[type='submit']').button('refresh');</p>
  </div> 
    </div>
    
    
    
  <div class="subtab">
<div class="desc">
<h2>通过jquery mobile的<a href="#">虚拟事件</a>或者绑定标准的js事件，例如change, focus, blur等,可以给a, input,或者是button元素直接绑定事件。</h2>
</div>
<div class="code"> 
    <p>$( ".myButton" ).bind( "click", function(event, ui) {</p>
    <p>...</p>
    <p>});</p>
  </div>
	<h1 class="method">
	  <div class="wg">enable</div>
  		<div class="info">使一个被disabled的表单按钮可用</div></h1>
<div class="code"> 
    <p>$('[type='submit']').button('enable');</p>
  </div> 
	<p class="indent"><strong>表单按钮</strong>拥有如下的自定义事件：</p>
	<h1 class="method">
	  <div class="wg">create</div>
  		<div class="info">在一个表单元素被创建是触发</div></h1>
<div class="code"> 
    <p>$('[type='submit']').button({</p>
    <p> <strong>	create: function(event, ui) { ... }</strong></p>
    <p>});</p>
  </div> 
  </div> 

    </div>
      	<hr />
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



